<template>
    <div class="export-data">
        <div class="export-data-title">
            <span>数据批量导出</span>
        </div>
        <div class="export-data-contents">
            <div style="width: 450px;">
                <div class="export-data-contents-title">1、导出订单详情</div>
                <div>
                    <!--<div class="export-data-input">-->
                        <!--<div class="label-input" >用户名称:</div>-->
                        <!--<el-select-->
                                <!--v-model="userId"-->
                                <!--filterable-->
                                <!--placeholder="请选择"-->
                                <!--:loading="loading"-->
                                <!--remote-->
                                <!--reserve-keyword-->
                                <!--:remote-method="remoteMethod"-->
                                <!--style="width: 320px;">-->
                            <!--<el-option-->
                                    <!--v-for="item in userOption"-->
                                    <!--:key="item.id"-->
                                    <!--:label="item.name +' '+ item.phone"-->
                                    <!--:value="item.id">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                    <!--</div>-->
                    <!--<div class="export-data-input">-->
                        <!--<div class="label-input" >单类选择:</div>-->
                        <!--<el-radio-group v-model="checkStatus" style="">-->
                            <!--<el-radio label="">全部</el-radio>-->
                            <!--<el-radio label="single">单件单</el-radio>-->
                            <!--<el-radio label="children">子单</el-radio>-->
                            <!--<el-radio label="parent">母单</el-radio>-->
                        <!--</el-radio-group>-->
                    <!--</div>-->
                    <!--<div class="export-data-input">-->
                        <!--<div  class="label-input" >状态选择:</div>-->
                        <!--<el-select v-model="orderStatus" multiple filterable placeholder="请选择" style="width: 320px;">-->
                            <!--<el-option-->
                                    <!--v-for="item in options"-->
                                    <!--:key="item.value"-->
                                    <!--:label="item.label"-->
                                    <!--:value="item.value">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                    <!--</div>-->
                    <!--<div  class="export-data-input">-->
                        <!--<div class="label-input" >派送时间选择:</div>-->
                        <!--<lar-field-date v-model="dateTimeOne"  :action="'search'" style="width: 320px;"></lar-field-date>-->
                    <!--</div>-->
                </div>
                <div>
                    <div  class="export-data-input">
                        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="130px" class="dialog-model">
                            <el-form-item
                                    prop="userId"
                                    label="用户名称">
                                <el-select
                                        v-model="dynamicValidateForm.userId"
                                        filterable
                                        placeholder="请选择"
                                        :loading="loading"
                                        remote
                                        reserve-keyword
                                        :remote-method="remoteMethod"
                                        style="width: 320px;">
                                    <el-option
                                            v-for="item in userOption"
                                            :key="item.id"
                                            :label="item.name +' '+ item.phone"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                    prop="checkStatus"
                                    label="单类选择">
                                <el-radio-group v-model="dynamicValidateForm.checkStatus" style="">
                                    <el-radio label="">全部</el-radio>
                                    <el-radio label="single">单件单</el-radio>
                                    <el-radio label="children">子单</el-radio>
                                    <el-radio label="parent">母单</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item
                                    prop="orderStatus"
                                    label="状态选择">
                                <el-select v-model="dynamicValidateForm.orderStatus" multiple filterable placeholder="请选择" style="width: 320px;">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                    prop="dateTimeOne"
                                    label="派送时间选择"
                                    :rules="[
                                    { required: true, message: '请选择派送时间', trigger: 'blur' },
                                 ]">
                                <lar-field-date v-model="dynamicValidateForm.dateTimeOne"  :action="'search'" style="width: 320px;"></lar-field-date>
                            </el-form-item>
                            <el-form-item label="导出备注">
                                <el-switch v-model="dynamicValidateForm.remark"></el-switch>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="text-align: center;margin-top:40px">
                        <el-button type="primary" :disabled="disabledOne" icon="el-icon-download" :loading="disabledOne" @click="submitForm('dynamicValidateForm')">{{disabledOne?'导出中':'导出订单详情'}}</el-button>
                    </div>
                </div>
            </div>
            <el-dialog
                    title="填写邮箱"
                    :visible.sync="dialogVisible"
                    :close-on-press-escape="false"
                    :close-on-click-modal="false"
                    width="500px">
                <div style="text-align: center;color: red;padding-top: 20px">提示:数据量过大时,请填写正确的邮箱,导出数据稍后会发送至此邮箱!</div>
                <div style="margin: 20px 0">
                    <el-form :model="dynamicValidateFormDialog" ref="dynamicValidateFormDialog" label-width="100px" class="dialog-model">
                        <el-form-item
                                prop="email"
                                label="邮箱"
                                :rules="[
                            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                         ]">
                            <el-input v-model="dynamicValidateFormDialog.email" placeholder="请输入邮箱地址" style="width: 340px;"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" style="text-align: center">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary"  icon="el-icon-download" @click="submitFormDialog('dynamicValidateFormDialog')" :disabled="disabledOne" :loading="disabledOne" >{{disabledOne?'导出中':'导出订单详情'}}</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ExportData",
        data() {
            return {
                dynamicValidateForm: {

                    userId: null,
                    checkStatus: '',
                    orderStatus:[],
                    dateTimeOne: [],
                    remark: false
                },
                dynamicValidateFormDialog: {
                    email: ''
                },
                dialogVisible: false,
                checkStatus:'',
                loading:false,
                userId:'',
                options:[
                    {
                        value: -11,
                        label: '用户取消'
                    },{
                        value: -12,
                        label: '系统取消'
                    },{
                        value: -20,
                        label: '已退款'
                    },{
                        value: -30,
                        label: '已赔付'
                    },{
                        value: -1,
                        label: '地址异常'
                    },{
                        value: 0,
                        label: '待处理'
                    },{
                        value: 5,
                        label: '已打单'
                    },{
                        value: 10,
                        label: '确认'
                    },{
                        value: 20,
                        label: '已付款'
                    },{
                        value: 30,
                        label: '待取件'
                    },{
                        value: 40,
                        label: '取货中'
                    },{
                        value: 45,
                        label: '取货完成'
                    },{
                        value: 47,
                        label: '待接管/调度'
                    },{
                        value: 50,
                        label: '取货返回中'
                    },{
                        value: 55,
                        label: '取货返回完成'
                    },{
                        value: 60,
                        label: '中转中'
                    },{
                        value: 65,
                        label: '中转已取'
                    },{
                        value: 67,
                        label: '中转接管'
                    },{
                        value: 68,
                        label: '待接管/调度'
                    },{
                        value: 70,
                        label: '中转已送'
                    },{
                        value: 90,
                        label: '派件已取'
                    },{
                        value: 92,
                        label: '派送中'
                    },{
                        value: 94,
                        label: '转交第三方派送'
                    },{
                        value: 96,
                        label: '第三方已取货'
                    },{
                        value: 98,
                        label: '第三方派送已签收'
                    },{
                        value: 100,
                        label: '完成'
                    }
                ],
                userOption:[],
                orderStatus:[],
                dateTimeOne:[],
                disabledOne:false,
                srcReturn: '',
                driverStatus: 'sign'
            }
        },
        watch: {
            dialogVisible:function (val) {
                if (!val) {
                    this.dynamicValidateFormDialog.email = '';
                }
            }
        },
        mounted() {
            this.getUserList('');
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.exportOrderDetail();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            submitFormDialog(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.exportOrderDetail();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.getUserList(query);
                    }, 200);
                } else {
                    this.userOption = [];
                }
            },
            getUserList(val) {
                this.userOption = [{
                    id:'all',
                    phone:'',
                    name:'不选择用户'
                }];
                let query={};
                if (!val) {
                    query={};
                } else {
                    query['name|phone$'] = '%' + val + '%';
                }
                this.$http.get(this.$larfree.httpQuery(query, 'common/user'))
                    .then((response) => {
                        this.loading = false;
                        response.data.data.forEach(item=>{
                            this.userOption.push(item);
                        })
                    })
                    .catch((error) => {
                        this.loading = false;
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            exportOrderDetail() {
                if (this.dynamicValidateForm.userId == 'all') {
                    this.dynamicValidateForm.userId = null;
                }
                let params = {
                    type: this.dynamicValidateForm.checkStatus,
                    userId: this.dynamicValidateForm.userId,
                    status: this.dynamicValidateForm.orderStatus,
                    email: this.dynamicValidateFormDialog.email,
                    start_time: this.dynamicValidateForm.dateTimeOne[0],
                    end_time: this.dynamicValidateForm.dateTimeOne[1],
                    remark: this.dynamicValidateForm.remark
                };
                this.disabledOne = true;
                this.$http.post('express/exportOrderMore',params)
                    .then((response) => {
                        this.disabledOne = false;
                        this.dialogVisible = false;
                        if (response.data.data.url == null) {
                            this.$message.success(response.data.data.message);
                        } else {
                            window.location.href = response.data.data.url;
                        }
                    })
                    .catch((error) => {
                        this.disabledOne = false;
                        if (error.response.data.msg) {
                            if (error.response.data.msg == '数据量过大,请填写邮箱') {
                                this.dialogVisible = true;
                            } else {
                                this.$message.error(error.response.data.msg);
                            }
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            }
        }
    }
</script>

<style scoped lang="less">
    .export-data{
        padding: 10px;
        .export-data-title{
            background-color: #fff;
            height: 42px;
            line-height: 42px;
            padding-left: 16px;
            font-size: 16px;
            border-bottom: 2px solid #eee;
        }
        .export-data-contents{
            background-color: #fff;
            padding: 0 0 20px 16px;
            .export-data-input{
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                .label-input{
                    width: 120px;
                    line-height: 42px;
                    text-align: right;
                    margin-right: 10px;
                }
            }
            .export-data-contents-title{
                font-size: 20px;
                color: #000;
                padding: 20px 0;


            }
        }
    }
</style>
